<template>
	<view>
		<view v-if="positionShow">
			<view @click="closePosition()" class="position_screen"></view>
			<view class="position_all" :style="{top: `${top}px`}" style="transition: all 200ms" @transitionend.native="transitionend">
				
				<view @click="closePosition()" class="posi_close">
					<image src="http://llg.qiniu.comeinvip.com/images/posclose.png"></image>
				</view>
				<view class="position_menu">
					<view class="posi_mlef">
						<text class="position01">当前定位</text>
						<text class="position02">沈阳市</text>
					</view>
					<view class="position03">重新定位</view>
				</view>

				<view class="position_setion">
					<view class="posi_name">
						<text class="p_n_style01">请选择</text>
						<view class="p_n_style02"><text></text></view>
					</view>
					<view class="posi_list">
						<text>沈阳市</text>
						<text>长春市</text>
						<text>哈尔滨市</text>
						<text>南京市</text>
						<text>沈阳市</text>
						<text>长春市</text>
						<text>哈尔滨市</text>
						<text>南京市</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import TopInfo from "@/utils/top-info";
import request from "@/utils/request";

	export default {
		props: {
			positionShow: {
				type: Boolean,
				default: {},
				observer: function(newVal, oldVal) {}
			}
		},
		data() {
			return {
        top: 0
			}
		},
    watch: {
      positionShow(newValue) {
        let time
        if (newValue) {
          this.top = TopInfo.getScreenHeight() - 400
        } else {
          this.top = TopInfo.getScreenHeight()
        }
      }
    },
    mounted() {
      this.top = TopInfo.getScreenHeight()
    },
    methods: {
      transitionend(event) {
        console.log('动画结束', event)
        if (this.top === TopInfo.getScreenHeight()) {
          this.$emit("close-position")
        }
      },
			//关闭弹层
			closePosition() {
        this.top = TopInfo.getScreenHeight()
			}
		},
		onLoad() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {

				}
			});

		}
	}
</script>

<style>
	@import url("@/static/css/others.css");
</style>